<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - IconHunter V2</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        }
        .floating-animation {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-2xl font-bold text-primary-600">
                        IconHunter <span class="text-lg text-primary-500">V2</span>
                    </a>
                </div>
                <div class="hidden md:block">
                    <div class="ml-4 flex items-center space-x-4">
                        <a href="index.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">首页</a>
                        <a href="faq.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">常见问题</a>
                        <a href="contact.html" class="text-primary-600 font-medium px-3 py-2 rounded-md">联系我们</a>
                        <a href="privacy.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">隐私政策</a>
                        <a href="terms.html" class="text-gray-600 hover:text-primary-600 hover:bg-gray-100 px-3 py-2 rounded-md font-medium">使用条款</a>
                    </div>
                </div>
                <div class="md:hidden">
                    <button type="button" class="text-gray-600 hover:text-primary-600 focus:outline-none">
                        <i class="fa-solid fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 头部区域 -->
    <div class="gradient-bg py-12 text-white">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-3xl font-bold mb-2">联系我们</h1>
            <p class="text-xl max-w-2xl mx-auto">我们随时准备聆听并解答您的问题</p>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="flex flex-col lg:flex-row gap-10">
            <!-- 联系表单 -->
            <div class="lg:w-3/5">
                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                    <h2 class="text-2xl font-bold mb-6">发送消息</h2>
                    <form action="#" method="POST">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-500" placeholder="您的姓名">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                                <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-500" placeholder="your@email.com">
                            </div>
                        </div>
                        <div class="mb-6">
                            <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                            <select id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-500">
                                <option value="">选择主题</option>
                                <option value="general">一般咨询</option>
                                <option value="technical">技术支持</option>
                                <option value="billing">账单与支付</option>
                                <option value="bug">报告问题</option>
                                <option value="feature">功能建议</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="mb-6">
                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">消息内容</label>
                            <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-500" placeholder="请详细描述您的问题或建议..."></textarea>
                        </div>
                        <div class="flex items-center mb-6">
                            <input type="checkbox" id="privacy" name="privacy" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
                            <label for="privacy" class="ml-2 block text-sm text-gray-700">
                                我同意根据<a href="privacy.html" class="text-primary-600 hover:text-primary-800">隐私政策</a>处理我的个人数据
                            </label>
                        </div>
                        <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2.5 px-4 rounded-lg shadow-sm transition">
                            发送消息
                        </button>
                    </form>
                </div>
            </div>
            
            <!-- 联系信息 -->
            <div class="lg:w-2/5">
                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 mb-8">
                    <h2 class="text-2xl font-bold mb-6">联系方式</h2>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
                                <i class="fa-solid fa-envelope"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium">电子邮件</h3>
                                <p class="mt-1 text-gray-600">support@iconhunter.com</p>
                                <p class="mt-1 text-sm text-gray-500">24小时内回复</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
                                <i class="fa-solid fa-comments"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium">在线客服</h3>
                                <p class="mt-1 text-gray-600">在应用内点击"联系支持"</p>
                                <p class="mt-1 text-sm text-gray-500">工作日 9:00-18:00</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
                                <i class="fa-solid fa-location-dot"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium">办公地址</h3>
                                <p class="mt-1 text-gray-600">中国上海市浦东新区张江高科技园区科苑路88号</p>
                                <p class="mt-1 text-sm text-gray-500">邮编: 201203</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- FAQ快速链接 -->
                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                    <h2 class="text-xl font-bold mb-4">常见问题</h2>
                    <p class="text-gray-600 mb-4">在联系我们之前，您可以查看以下常见问题，可能已经有了您需要的答案。</p>
                    <ul class="space-y-2">
                        <li>
                            <a href="faq.html#download" class="text-primary-600 hover:text-primary-800 flex items-center">
                                <i class="fa-solid fa-chevron-right mr-2 text-xs"></i>
                                如何下载图标？
                            </a>
                        </li>
                        <li>
                            <a href="faq.html#subscription" class="text-primary-600 hover:text-primary-800 flex items-center">
                                <i class="fa-solid fa-chevron-right mr-2 text-xs"></i>
                                如何管理我的订阅？
                            </a>
                        </li>
                        <li>
                            <a href="faq.html#formats" class="text-primary-600 hover:text-primary-800 flex items-center">
                                <i class="fa-solid fa-chevron-right mr-2 text-xs"></i>
                                支持哪些图标格式？
                            </a>
                        </li>
                        <li>
                            <a href="faq.html#troubleshooting" class="text-primary-600 hover:text-primary-800 flex items-center">
                                <i class="fa-solid fa-chevron-right mr-2 text-xs"></i>
                                常见问题排查
                            </a>
                        </li>
                    </ul>
                    <a href="faq.html" class="mt-4 inline-block text-primary-600 hover:text-primary-800 font-medium">
                        查看全部问题 <i class="fa-solid fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 团队响应说明 -->
        <div class="mt-16 bg-white rounded-xl p-8 shadow-sm border border-gray-200 relative overflow-hidden">
            <div class="z-10 relative">
                <h2 class="text-2xl font-bold mb-4 text-center">我们的承诺</h2>
                <p class="text-gray-600 text-center max-w-3xl mx-auto mb-8">
                    IconHunter团队致力于提供卓越的客户支持体验。我们承诺在24小时内回复所有查询，并努力以最快的速度解决您的问题。
                </p>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto bg-primary-100 rounded-full flex items-center justify-center text-primary-600 mb-4">
                            <i class="fa-solid fa-bolt text-2xl"></i>
                        </div>
                        <h3 class="font-semibold text-lg mb-2">快速响应</h3>
                        <p class="text-gray-600">24小时内回复所有邮件和在线咨询</p>
                    </div>
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto bg-primary-100 rounded-full flex items-center justify-center text-primary-600 mb-4">
                            <i class="fa-solid fa-user-gear text-2xl"></i>
                        </div>
                        <h3 class="font-semibold text-lg mb-2">专业支持</h3>
                        <p class="text-gray-600">我们的团队由产品专家组成，能解答所有问题</p>
                    </div>
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto bg-primary-100 rounded-full flex items-center justify-center text-primary-600 mb-4">
                            <i class="fa-solid fa-heart text-2xl"></i>
                        </div>
                        <h3 class="font-semibold text-lg mb-2">用户至上</h3>
                        <p class="text-gray-600">您的满意是我们最重要的目标</p>
                    </div>
                </div>
            </div>
            
            <!-- 装饰性元素 -->
            <div class="absolute -top-12 -right-12 w-40 h-40 bg-primary-200 rounded-full opacity-20"></div>
            <div class="absolute -bottom-20 -left-16 w-60 h-60 bg-blue-200 rounded-full opacity-20"></div>
        </div>
        
        <!-- 社交媒体 -->
        <div class="mt-16">
            <h2 class="text-2xl font-bold mb-6 text-center">关注我们的社交媒体</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <a href="#" class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition flex flex-col items-center">
                    <i class="fa-brands fa-twitter text-blue-400 text-3xl mb-3"></i>
                    <span class="font-medium">Twitter</span>
                </a>
                <a href="#" class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition flex flex-col items-center">
                    <i class="fa-brands fa-facebook text-blue-600 text-3xl mb-3"></i>
                    <span class="font-medium">Facebook</span>
                </a>
                <a href="#" class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition flex flex-col items-center">
                    <i class="fa-brands fa-instagram text-pink-500 text-3xl mb-3"></i>
                    <span class="font-medium">Instagram</span>
                </a>
                <a href="#" class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition flex flex-col items-center">
                    <i class="fa-brands fa-github text-gray-800 text-3xl mb-3"></i>
                    <span class="font-medium">GitHub</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="bg-white mt-12 border-t border-gray-200">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">IconHunter V2</h3>
                    <p class="text-gray-600">寻找最好的应用图标</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">支持</h3>
                    <ul class="space-y-2">
                        <li><a href="faq.html" class="text-gray-600 hover:text-primary-600">常见问题</a></li>
                        <li><a href="contact.html" class="text-gray-600 hover:text-primary-600">联系我们</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary-600">使用教程</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">法律</h3>
                    <ul class="space-y-2">
                        <li><a href="privacy.html" class="text-gray-600 hover:text-primary-600">隐私政策</a></li>
                        <li><a href="terms.html" class="text-gray-600 hover:text-primary-600">使用条款</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary-600">退款政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-twitter text-xl"></i></a>
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-facebook text-xl"></i></a>
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-instagram text-xl"></i></a>
                        <a href="#" class="text-gray-600 hover:text-primary-600"><i class="fa-brands fa-github text-xl"></i></a>
                    </div>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500">
                <p>&copy; 2023 IconHunter. 保留所有权利。</p>
            </div>
        </div>
    </footer>
</body>
</html> 